import React, { Suspense } from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import { Result, Icon } from 'antd-mobile';

let Register = React.lazy(() => import("./pages/Register/Register"));
let Login = React.lazy(() => import("./pages/Login/Login"));
let Index = React.lazy(() => import("./pages/Index/Index"));
let List = React.lazy(() => import("./pages/List/List"));
let Detail = React.lazy(() => import("./pages/Detail/Detail"));
let Order = React.lazy(() => import("./pages/Order/Order"));

function App() {
  return (
    <div className="App">
      {/* 一级路由出口 */}
      <Suspense fallback={<Result
        img={<Icon type="loading" size={"lg"} style={{ fill: '#ccc' }} />}
        title="正在玩命加载......"
      />}>
        <Switch>
          <Route path="/register" component={Register}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/index" component={Index}></Route>
          <Route path="/list" component={List}></Route>
          <Route path="/detail" component={Detail}></Route>
          <Route path="/order" component={Order}></Route>
          <Redirect to="/login"></Redirect>
        </Switch>
      </Suspense>
    </div>
  );
}

export default App;
